import React from 'react'
import Flex from 'antd-mobile/lib/flex'
import WingBlank from 'antd-mobile/lib/wing-blank'
import ProductItem from '../ProductItem/ProductItem'
import { domain } from '../../tools/config/var'

import 'antd-mobile/lib/flex/style/css'
import 'antd-mobile/lib/wing-blank/style/css'
import './ActivityCard.scss'

type ActivityCardProps = {
  data: Record<string, string|Record<string, string>[]>
  type: 'typed'|'taged'
}

export default class ActivityCard extends React.PureComponent<ActivityCardProps> {

  public imgClickHandler = (evt: React.MouseEvent<HTMLImageElement>) => {
    const url = evt.currentTarget.getAttribute('src')
    console.log(evt.currentTarget, url)
    url && (location.href = url)
  }

  public render () {
    const { name, imgurl, id, shop } = this.props.data
    if (!Array.isArray(shop)) {
      return null
    }
    if (this.props.type === 'taged') {
      return (
        <div className="com_activitycard_container">
          <WingBlank>
            <Flex className="head"
              justify="between"
              align="center"
            >
              <div className="title">{name}</div>
              <a className="label" href={`${domain}/shop/goodslist/label/${id}`}>更多></a>
            </Flex>
            <div className="post_img">
              <img src={`${domain}${imgurl}`} alt=""
                onClick={this.imgClickHandler}
              />
            </div>
            <Flex className="main"
              wrap="wrap"
            >
              {
                shop.map((val, index) => {
                  if (index >= 6) {
                    return null
                  } else {
                    return (
                      <ProductItem key={val.id} data={val} className={`grid-3_item`} />
                    )
                  }
                })
              }
            </Flex>
          </WingBlank>
        </div>
      )
    } else if (this.props.type === 'typed') {
      return (
        <div className="com_activitycard_container">
          <WingBlank>
            <Flex className="head"
              justify="between"
              align="center"
            >
              <div className="title">{name}</div>
              <a className="label" href={`${domain}/shop/goodslist/label/${id}`}>更多></a>
            </Flex>
            <div className="post_img">
              <img src={`${domain}${imgurl}`} alt=""
                onClick={this.imgClickHandler}
              />
            </div>
            <Flex className="main"
              wrap="wrap"
            >
              {
                shop.map((val, index) => {
                  if (index >= 6) {
                    return null
                  } else {
                    return (
                      <ProductItem key={val.id} data={val} className={`grid-3_item`} />
                    )
                  }
                })
              }
            </Flex>
          </WingBlank>
        </div>
      )
    } else {
      return null
    }
  }
}
